import React from 'react'
import { View } from '@tarojs/components'
import { AtDrawer, AtAvatar, AtTag } from 'taro-ui'

import styles from './index.module.less'

export interface User {
  picture: string
  telephone: string
  userTypeValue: string
  username: string
}

const UserDetail: React.FC<{
  isShow: boolean,
  onClose: () => void
  user: User
}> = ({ isShow, onClose, user }) => {
  return (
    <View>
      <AtDrawer
        show={isShow}
        mask
        onClose={onClose}
      >
        <View className={styles.User}>
          {user ? <>
            <AtAvatar size="large" circle image={user.picture}></AtAvatar>
            <View>{user.username} <AtTag className={styles.userTag} circle size="small" active={true}>{user.userTypeValue}</AtTag></View>
            <View>{user.telephone}</View>
          </>
            : <View>你还未绑定手机号</View>
          }
        </View>
      </AtDrawer>
    </View>
  )
}

export default UserDetail